<template>

	<view class="index-page">
		<!-- 头部区域 -->
		<view class="header">
			<view class="welcome">
				<text class="welcome-text">欢迎使用投票系统</text>
				<text class="sub-text">参与投票，表达你的观点</text>
			</view>
		</view>

		<!-- 轮播图区域 -->
		<view class="banner-section">
			<swiper class="banner-swiper" circular autoplay interval="3000" duration="500" indicator-dots
				indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#ffffff">
				<swiper-item v-for="(banner, index) in bannerList" :key="index">
					<image :src="banner.image" mode="aspectFill" @click="handleBannerClick(banner)" />
				</swiper-item>
			</swiper>
		</view>

		<!-- 功能导航区 -->
		<view class="nav-section">
			<view class="nav-grid">
				<view class="nav-item" @click="handleNavClick('vote')">
					<view class="nav-icon vote-icon">
						<uni-icons type="checkbox-filled" size="32" color="#007AFF"></uni-icons>
					</view>
					<text class="nav-text">投票活动</text>
				</view>
				<view class="nav-item" @click="handleNavClick('work')">
					<view class="nav-icon work-icon">
						<uni-icons type="star-filled" size="32" color="#FF9500"></uni-icons>
					</view>
					<text class="nav-text">作品展示</text>
				</view>
				<view class="nav-item" @click="handleNavClick('entry')">
					<view class="nav-icon entry-icon">
						<uni-icons type="plus-filled" size="32" color="#34C759"></uni-icons>
					</view>
					<text class="nav-text">报名参与</text>
				</view>
				<view class="nav-item" @click="handleNavClick('feedback')">
					<view class="nav-icon feedback-icon">
						<uni-icons type="chat-filled" size="32" color="#FF3B30"></uni-icons>
					</view>
					<text class="nav-text">意见反馈</text>
				</view>
			</view>
		</view>

		<!-- 数据统计区 -->
		<view class="stats-section">
			<view class="stats-title">
				<text class="title-text">数据概览</text>
			</view>
			<view class="stats-grid">
				<view class="stats-item">
					<text class="stats-number">{{ statsData.totalVotes }}</text>
					<text class="stats-label">总投票数</text>
				</view>
				<view class="stats-item">
					<text class="stats-number">{{ statsData.totalUsers }}</text>
					<text class="stats-label">参与用户</text>
				</view>
				<view class="stats-item">
					<text class="stats-number">{{ statsData.activeVotes }}</text>
					<text class="stats-label">进行中</text>
				</view>
				<view class="stats-item">
					<text class="stats-number">{{ statsData.totalWorks }}</text>
					<text class="stats-label">作品数量</text>
				</view>
			</view>
		</view>

		<!-- 最新活动区 -->
		<view class="latest-section">
			<view class="section-header">
				<text class="section-title">最新活动</text>
				<text class="more-text" @click="handleMoreClick('vote')">更多</text>
			</view>
			<view class="vote-list">
				<view class="vote-item" v-for="vote in latestVotes" :key="vote.id" @click="handleVoteClick(vote)">
					<view class="vote-info">
						<text class="vote-title">{{ vote.title }}</text>
						<text class="vote-desc">{{ vote.description }}</text>
						<view class="vote-meta">
							<text class="vote-count">{{ vote.voteCount }}人参与</text>
							<text class="vote-status" :class="vote.status">{{ getStatusText(vote.status) }}</text>
						</view>
					</view>
					<view class="vote-image">
						<image :src="vote.image" mode="aspectFill" />
					</view>
				</view>
			</view>
		</view>

		<!-- 热门作品区 -->
		<view class="hot-section">
			<view class="section-header">
				<text class="section-title">热门作品</text>
				<text class="more-text" @click="handleMoreClick('work')">更多</text>
			</view>
			<scroll-view class="work-scroll" scroll-x="true">
				<view class="work-item" v-for="work in hotWorks" :key="work.id" @click="handleWorkClick(work)">
					<image :src="work.image" mode="aspectFill" class="work-image" />
					<text class="work-title">{{ work.title }}</text>
					<text class="work-author">{{ work.author }}</text>
				</view>
			</scroll-view>
		</view>

		<!-- 加载框 -->
		<uni-popup ref="loadingPopup" type="center" :mask-click="false" @change="onPopupChange">
			<view class="loading-content">
				<image class="loading-image" src="/static/logo.png" mode="aspectFit" />
				<text class="loading-text">{{ loadingText }}</text>
			</view>
		</uni-popup>

	</view>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue';
import PageBottom from '@/components/PageBottom.vue';
import PageHeader from '@/components/PageHeader.vue';
import { generateFilePath } from '@/library/tool.js';

export default defineComponent({
	name: 'Index',
	components: {
		PageBottom,
		PageHeader
	},
	setup(props, { emit }) {
		// ===== 变量声明 =====
		const loadingText = ref('加载中...');
		const currentPageUrl = ref('/pages/Index');
		const bottomHeight = ref(160); // 底部导航栏高度（rpx）
		const loadingPopup = ref(null);
		const isPopupVisible = ref(false);

		// 轮播图数据
		const bannerList = ref([
			{
				id: 1,
				image: '/static/banner_1.png',
				title: '投票活动',
				url: '/pages-vote/vote/List'
			},
			{
				id: 2,
				image: '/static/banner_2.png',
				title: '作品展示',
				url: '/pages-vote/font/List'
			}
		]);

		// 统计数据
		const statsData = ref({
			totalVotes: 1234,
			totalUsers: 567,
			activeVotes: 8,
			totalWorks: 89
		});

		// 最新投票活动
		const latestVotes = ref([
			{
				id: 1,
				title: '最佳设计作品评选',
				description: '评选年度最佳设计作品，展现创意与才华',
				voteCount: 156,
				status: 'active',
				image: '/static/example.png'
			},
			{
				id: 2,
				title: '校园文化节投票',
				description: '为校园文化节活动投票，选出最受欢迎的项目',
				voteCount: 89,
				status: 'active',
				image: '/static/example.png'
			}
		]);

		// 热门作品
		const hotWorks = ref([
			{
				id: 1,
				title: '创意海报设计',
				author: '设计师小王',
				image: '/static/example.png'
			},
			{
				id: 2,
				title: '摄影作品集',
				author: '摄影师小李',
				image: '/static/example.png'
			},
			{
				id: 3,
				title: '手绘插画',
				author: '插画师小张',
				image: '/static/example.png'
			}
		]);

		// ===== 页面交互方法 =====
		// 轮播图点击
		const handleBannerClick = (banner) => {
			uni.navigateTo({
				url: banner.url
			});
		};

		// 导航点击
		const handleNavClick = (type) => {
			const routes = {
				vote: '/pages-vote/vote/List',
				work: '/pages-vote/font/List',
				entry: '/pages-vote/entry/List',
				feedback: '/pages/note/Submit'
			};

			uni.navigateTo({
				url: routes[type]
			});
		};

		// 投票点击
		const handleVoteClick = (vote) => {
			uni.navigateTo({
				url: `/pages-vote/vote/Detail?id=${vote.id}`
			});
		};

		// 作品点击
		const handleWorkClick = (work) => {
			uni.navigateTo({
				url: `/pages-vote/font/Detail?id=${work.id}`
			});
		};

		// 更多点击
		const handleMoreClick = (type) => {
			const routes = {
				vote: '/pages-vote/vote/List',
				work: '/pages-vote/font/List'
			};

			uni.navigateTo({
				url: routes[type]
			});
		};

		// 底部导航栏高度变化处理
		const handleBottomHeightChange = (heightInfo) => {
			// 将px转换为rpx（假设1px = 2rpx）
			const totalBottomHeightRpx = heightInfo.totalBottomHeight * 2;
			console.log('totalBottomHeightRpx', totalBottomHeightRpx);
			bottomHeight.value = Math.max(160, totalBottomHeightRpx); // 最小160rpx
			console.log('底部导航栏高度更新:', heightInfo, '总高度px:', heightInfo.totalBottomHeight, 'rpx高度:', bottomHeight.value);
		};

		// ===== 其他方法 =====
		// 获取状态文本
		const getStatusText = (status) => {
			const statusMap = {
				active: '进行中',
				ended: '已结束',
				upcoming: '即将开始'
			};
			return statusMap[status] || '未知';
		};

		// 监听popup状态变化
		const onPopupChange = (e) => {
			console.log('popup状态变化:', e);
			console.log('是否显示:', e.show);
			isPopupVisible.value = e.show;
		};

		// 加载首页数据
		const loadHomeData = () => {
			loadingText.value = '加载首页数据...';
			// 显示loading弹窗
			loadingPopup.value.open();
			console.log('加载首页数据.loadingPopup', loadingPopup.value);
			console.log('loadingPopup', loadingPopup.value);
			// 模拟加载延迟
			setTimeout(() => {
				// 这里应该调用后端接口获取数据
				loadingPopup.value.close();
			}, 500);
		};

		// ===== 生命周期钩子 =====
		onMounted(() => {
			loadHomeData();
			console.log('generateFilePath function');
			const fileInfo = generateFilePath({
				fileName: 'test.txt',
				fileType: 'txt',
				moduleType: 'user'
			});
			console.log('fileInfo', fileInfo);
		});

		return {
			// 变量
			loadingText,
			loadingPopup,
			isPopupVisible,
			currentPageUrl,
			bottomHeight,
			bannerList,
			statsData,
			latestVotes,
			hotWorks,

			// 方法
			handleBannerClick,
			handleNavClick,
			handleVoteClick,
			handleWorkClick,
			handleMoreClick,
			handleBottomHeightChange,
			getStatusText,
			onPopupChange
		};
	}
});
</script>

<style lang="less" scoped>
.index-page {
	width: 100vw;
	min-height: calc(100vh - v-bind('bottomHeight + "rpx"'));
	background-color: #f5f5f5;
	padding-bottom: v-bind('bottomHeight + "rpx"'); // 动态为底部导航栏留出空间

	// 头部区域
	.header {
		background: linear-gradient(135deg, #007AFF 0%, #0056b3 100%);
		padding: 60rpx 40rpx 40rpx;
		color: #ffffff;

		.welcome {
			.welcome-text {
				font-size: 36rpx;
				font-weight: bold;
				display: block;
				margin-bottom: 8rpx;
			}

			.sub-text {
				font-size: 28rpx;
				opacity: 0.9;
				display: block;
			}
		}
	}

	// 轮播图区域
	.banner-section {
		margin: -20rpx 20rpx 20rpx;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);

		.banner-swiper {
			height: 300rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	// 功能导航区
	.nav-section {
		margin: 0 20rpx 30rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx 20rpx;

		.nav-grid {
			display: flex;
			justify-content: space-around;

			.nav-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 20rpx;

				.nav-icon {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 12rpx;
					background-color: #f8f9fa;
				}

				.nav-text {
					font-size: 24rpx;
					color: #333333;
				}
			}
		}
	}

	// 数据统计区
	.stats-section {
		margin: 0 20rpx 30rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx 20rpx;

		.stats-title {
			margin-bottom: 20rpx;

			.title-text {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}
		}

		.stats-grid {
			display: flex;
			justify-content: space-between;

			.stats-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				flex: 1;

				.stats-number {
					font-size: 36rpx;
					font-weight: bold;
					color: #007AFF;
					margin-bottom: 8rpx;
				}

				.stats-label {
					font-size: 24rpx;
					color: #666666;
				}
			}
		}
	}

	// 最新活动区
	.latest-section {
		margin: 0 20rpx 30rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx 20rpx;

		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}

			.more-text {
				font-size: 28rpx;
				color: #007AFF;
			}
		}

		.vote-list {
			.vote-item {
				display: flex;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 1px solid #f0f0f0;

				&:last-child {
					border-bottom: none;
				}

				.vote-info {
					flex: 1;
					margin-right: 20rpx;

					.vote-title {
						font-size: 30rpx;
						font-weight: bold;
						color: #333333;
						display: block;
						margin-bottom: 8rpx;
					}

					.vote-desc {
						font-size: 26rpx;
						color: #666666;
						display: block;
						margin-bottom: 12rpx;
					}

					.vote-meta {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.vote-count {
							font-size: 24rpx;
							color: #999999;
						}

						.vote-status {
							font-size: 24rpx;
							padding: 4rpx 12rpx;
							border-radius: 12rpx;

							&.active {
								background-color: #e8f5e8;
								color: #34C759;
							}

							&.ended {
								background-color: #ffe8e8;
								color: #FF3B30;
							}
						}
					}
				}

				.vote-image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 12rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	// 热门作品区
	.hot-section {
		margin: 0 20rpx 30rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx 20rpx;

		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}

			.more-text {
				font-size: 28rpx;
				color: #007AFF;
			}
		}

		.work-scroll {
			white-space: nowrap;

			.work-item {
				display: inline-block;
				width: 200rpx;
				margin-right: 20rpx;
				text-align: center;

				.work-image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 12rpx;
					margin-bottom: 12rpx;
				}

				.work-title {
					font-size: 26rpx;
					color: #333333;
					font-weight: bold;
					display: block;
					margin-bottom: 4rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.work-author {
					font-size: 24rpx;
					color: #666666;
					display: block;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}

	// 加载框样式
	.loading-content {
		background-color: rgba(0, 0, 0, 0.8);
		border-radius: 16rpx;
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		min-width: 200rpx;

		.loading-image {
			width: 100rpx;
			height: 100rpx;
			margin-bottom: 20rpx;
			animation: rotate 1s linear infinite;
		}

		.loading-text {
			color: #ffffff;
			font-size: 28rpx;
			text-align: center;
		}
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}
}
</style>